<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <title>学员信息表</title>
    <style>
        .top {
            text-align: center;
            background: #e9ecef;
        }

        .top h1 {
            font-weight: 300;
            padding-top: 80px;
            color: #000;
        }

        .top p {
            padding-bottom: 60px;
            color: #000;
        }

        .buttom {
            width: 900px;
            margin: auto;
        }

        h2 {
            font-weight: 300;
            line-height: 65px;

        }

        .buttom input {
            width: 230px;
            height: 31px;
        }

        .buttom #s {
            width: 210px;
            height: 31px;
        }

        .buttom #btn {
            width: 215px;
            height: 31px;
            background: #a9d2f6;
        }
        li{
            list-style: none;
            border:1px solid #ccc;
            padding:10px;
            text-indent: 10px;
            /* text-align: center; */
        }
        #list{
            padding:0;
        }
        #list li span{
            width: 275px;
            display: inline-block;
        }
        #list::after{
            display: table;
            content: "";
            clear: both;
        }
        .li1,.li2{
            float: left;
            width: 286px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="container-fluld">
        <div class="top">
            <h1>学员信息表</h1>
            <p>1803</p>
        </div>

        <div class="buttom">
            <h2>添加</h2>
            <input type="text" id="n" placeholder="姓名">
            <select name="" id="s">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <input type="number" id="a" placeholder="年龄">
            <button id="btn">添加</button>

            <h2>列表</h2> 
                <li class="li1">姓名</li>
                <li class="li2">姓别</li>
                <li class="li3">年龄</li>
            <ul id="list"></ul>
        </div>
    </div>
    <script>

function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var json = JSON.parse(xmlhttp.responseText);
                    console.log(json.data);
                    for (let i = 0; i < json.data.length; i++) {
                        var li = document.createElement("li");

                        var spanName = document.createElement("span");
                        spanName.innerHTML = json.data[i].studentName;

                        var spanSex = document.createElement("span");
                        spanSex.innerHTML = json.data[i].sex;

                        var spanAge = document.createElement("span");
                        spanAge.innerHTML = json.data[i].age;

                        li.appendChild(spanName);
                        li.appendChild(spanSex);
                        li.appendChild(spanAge);

                        document.querySelector("#list").appendChild(li);
                    }
                }
            }
            xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
            
            xmlhttp.send();
        }
        loadXMLDoc()

        document.querySelector("#btn").addEventListener("click", function () {
            //获取姓名
            var n = document.querySelector("#n").value;
            console.log(n)
            //获取性别
            var s = document.querySelector("#s").value;
            console.log(s)
            //获取年龄
            var a = document.querySelector("#a").value;
            console.log(a)


            //ajax代码

            var e;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                e = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                e = new ActiveXObject("Microsoft.XMLHTTP");
            }
            e.onreadystatechange = function () {
                if (e.readyState == 4 && e.status == 200) {
                    // console.log(json.data);
                    document.querySelector("#list").innerHTML="";
                    loadXMLDoc()
                }
            }
            e.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a, true);
            e.send();
        })
    </script>
</body>

</html>